import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/radian.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class BargainAccelerateController extends GetxController {
  List<_WinUserModel> winList = [];
  List<String> tagList = ['挑选商品', '免单砍价', '邀请好友', '商品免单'];
  RxBool isHas = false.obs;

  @override
  void onInit() {
    for (var i = 0; i < 20; i++) {
      winList.add(_WinUserModel(
          avatarUrl:
              'https://img1.baidu.com/it/u=3717722631,1560911212&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          nickname: '会飞的鱼',
          productName: '2024夏新装款'));
    }
    super.onInit();
  }
}

class BargainAcceleratePage extends GetView<BargainAccelerateController> {
  const BargainAcceleratePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              alignment: Alignment.center,
              padding: EdgeInsets.symmetric(vertical: 15.h),
              child: Text(
                '恭喜你！成功挑选到喜欢的宝贝',
                style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize18, color: ColorsUtils.color3333),
              ),
            ),
            Center(
              child: SizedBox(
                width: 300.w,
                height: 30.h,
                child: Swiper.list<_WinUserModel>(
                    list: controller.winList,
                    builder: (_, win, index) {
                      return Container(
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          spacing: 0,
                          crossAxisAlignment: WrapCrossAlignment.center,
                          alignment: WrapAlignment.start,
                          children: [
                            CircleAvatar(
                              radius: 15.w,
                              backgroundColor:
                                  ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f),
                              backgroundImage: NetworkImage(win.avatarUrl),
                            ),
                            Text(
                              '【${win.nickname}】已免费拿【${win.productName}】',
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                            )
                          ],
                        ),
                      );
                    },
                    autoplay: true,
                    duration: 800,
                    autoplayDelay: 5000,
                    itemHeight: 30.h,
                    itemWidth: 300.w,
                    scrollDirection: Axis.vertical),
              ),
            ),
            Container(
              alignment: Alignment.center,
              padding: EdgeInsets.only(top: 20.h, bottom: 15.h),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(5.r),
                child: CachedNetworkImage(
                  imageUrl:
                      'https://img.alicdn.com/img/i3/2849050167/O1CN014jpNc81D6X4kNdbsm_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
                  width: 211.w,
                  height: 184.h,
                  fit: BoxFit.contain,
                ),
              ),
            ),
            Obx(() => buildIndexedStack(context)),
            Container(
              margin: EdgeInsets.only(top: 30.h),
              alignment: Alignment.center,
              child: FractionallySizedBox(
                widthFactor: 0.8,
                child: Container(
                  height: 45.h,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                      borderRadius: BorderRadius.circular(23.h)),
                  child: TextButton(
                      onPressed: () {
                        if (controller.isHas.isFalse) {
                          controller.isHas.value = true;
                        }
                      },
                      child: Text(
                        '点击使用超级免单卡，加速免费拿',
                        style: StylesUtils.customTextStyle(),
                      )),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget buildIndexedStack(BuildContext context) {
    return IndexedStack(
      index: controller.isHas.isFalse ? 0 : 1,
      children: [
        ListBody(
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 15.w),
              child: Row(
                children: [
                  CircleAvatar(
                    radius: 25.w,
                    backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f),
                    child: SvgUtils.assetName('u7732', width: 20.w, height: 20.h),
                  ),
                  Expanded(
                      child: Center(
                    child: Container(
                      height: 1,
                      width: 35.w,
                      decoration: BoxDecoration(
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f),
                      ),
                    ),
                  )),
                  CircleAvatar(
                    radius: 25.w,
                    backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f),
                    child: SvgUtils.assetName('u7737', width: 20.w, height: 20.h),
                  ),
                  Expanded(
                      child: Center(
                    child: Container(
                      height: 1,
                      width: 35.w,
                      decoration: BoxDecoration(
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f),
                      ),
                    ),
                  )),
                  CircleAvatar(
                    radius: 25.w,
                    backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorD7d7),
                    child: SvgUtils.assetName('u7743', width: 20.w, height: 20.h),
                  ),
                  Expanded(
                      child: Center(
                    child: Container(
                      height: 1,
                      width: 35.w,
                      decoration: BoxDecoration(
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f),
                      ),
                    ),
                  )),
                  CircleAvatar(
                    radius: 25.w,
                    backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorD7d7),
                    child: SvgUtils.assetName('u7751', width: 20.w, height: 20.h),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10.h),
              child: Row(
                  children: controller.tagList
                      .asMap()
                      .map((i, e) => MapEntry(
                          i,
                          Expanded(
                              child: Container(
                            alignment: Alignment.center,
                            padding: EdgeInsets.symmetric(horizontal: 15.w),
                            child: Text(
                              e,
                              style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize13,
                                  color: i < 2 ? ColorsUtils.color3333 : ColorsUtils.colorAaaa),
                            ),
                          ))))
                      .values
                      .toList()),
            ),
          ],
        ),
        Center(
          child: SizedBox(
            width: 285.w,
            child: Column(
              children: [
                Center(
                  child: RichText(
                    text: TextSpan(
                        text: '超越2584451用户，剩',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        children: [
                          TextSpan(
                              text: '1.0',
                              style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize18, color: ColorsUtils.colorF048)),
                          const TextSpan(text: '%免费拿')
                        ]),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 5.h),
                  alignment: Alignment.centerLeft,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        margin: EdgeInsets.only(left: 15.w),
                        child: Stack(
                          children: [
                            CircleAvatar(
                              radius: 10,
                              backgroundColor:
                                  ColorsUtils.parseColorFromHexString(ColorsUtils.color0099),
                              child: const CircleAvatar(
                                radius: 8,
                                backgroundImage: NetworkImage(
                                    'https://img1.baidu.com/it/u=1431921493,1127345458&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=475'),
                              ),
                            ),
                            Transform.translate(
                              offset: const Offset(10, 0),
                              child: CircleAvatar(
                                  radius: 10,
                                  backgroundColor:
                                      ColorsUtils.parseColorFromHexString(ColorsUtils.color0099),
                                  child: const CircleAvatar(
                                    radius: 8,
                                    backgroundImage: NetworkImage(
                                      'https://img1.baidu.com/it/u=3024948564,2644432768&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=498',
                                    ),
                                  )),
                            )
                          ],
                        ),
                      ),
                      Stack(
                        children: [
                          CircleAvatar(
                            radius: 10,
                            backgroundColor:
                                ColorsUtils.parseColorFromHexString(ColorsUtils.color0099),
                            child: const CircleAvatar(
                              radius: 8,
                              backgroundImage: NetworkImage(
                                  'https://img1.baidu.com/it/u=3048095560,1624594208&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'),
                            ),
                          ),
                          Transform.translate(
                            offset: const Offset(10, 0),
                            child: CircleAvatar(
                              radius: 10,
                              backgroundColor:
                                  ColorsUtils.parseColorFromHexString(ColorsUtils.color0099),
                              child: const CircleAvatar(
                                radius: 8,
                                backgroundImage: NetworkImage(
                                    'https://img1.baidu.com/it/u=592531506,930979498&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'),
                              ),
                            ),
                          ),
                          Transform.translate(
                            offset: const Offset(20, 0),
                            child: CircleAvatar(
                              radius: 10,
                              backgroundColor:
                                  ColorsUtils.parseColorFromHexString(ColorsUtils.color0099),
                              child: const CircleAvatar(
                                backgroundImage: NetworkImage(
                                  'https://img1.baidu.com/it/u=242144319,4161199610&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380',
                                ),
                                radius: 8,
                              ),
                            ),
                          )
                        ],
                      ),
                      Container(
                        margin: EdgeInsets.only(right: 5.w),
                        alignment: Alignment.center,
                        child: CircleAvatar(
                            radius: 10,
                            backgroundColor:
                                ColorsUtils.parseColorFromHexString(ColorsUtils.color0099),
                            child: const CircleAvatar(
                              radius: 8,
                              backgroundImage: NetworkImage(
                                'https://img2.baidu.com/it/u=1373015926,3656609762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                              ),
                            )),
                      )
                    ],
                  ),
                ),
                Container(
                  height: 16.h,
                  margin: EdgeInsets.only(top: 5.h),
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.centerRight,
                          end: Alignment.centerLeft,
                          colors: [
                            ColorsUtils.rgba(249, 212, 35, 1),
                            ColorsUtils.rgba(248, 54, 0, 1)
                          ],
                          stops: const [0.0, 1.0],
                          transform: GradientRotation(RadianUtils.angleToRadian(270)),
                          tileMode: TileMode.repeated),
                      borderRadius: BorderRadius.circular(8.r)),
                  alignment: Alignment.centerLeft,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        margin: EdgeInsets.only(left: 15.w),
                        alignment: Alignment.center,
                        child: const CircleAvatar(
                          radius: 8,
                          backgroundColor: Colors.white,
                        ),
                      ),
                      const CircleAvatar(
                        radius: 8,
                        backgroundColor: Colors.white,
                      ),
                      Container(
                        margin: EdgeInsets.only(right: 5.w),
                        alignment: Alignment.center,
                        child: const CircleAvatar(
                          radius: 8,
                          backgroundColor: Colors.white,
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 10.h),
                  alignment: Alignment.centerLeft,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        margin: EdgeInsets.only(left: 15.w),
                        alignment: Alignment.center,
                        child: Text(
                          '10%',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                      ),
                      Container(
                        alignment: Alignment.center,
                        child: Text(
                          '50%',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(right: 5.w),
                        alignment: Alignment.center,
                        child: Text(
                          '99%',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        )
      ],
    );
  }
}

class _WinUserModel {
  String avatarUrl;

  String nickname;

  String productName;

  _WinUserModel({required this.avatarUrl, required this.nickname, required this.productName});
}
